

$(function(){


  var page=1
  var pageSize = 2
  var imgs =[]
  function render(){
    $.ajax({
      type: "get",
      url: "/product/queryProductDetailList",
      data: {
        page: page,
        pageSize: pageSize
      },
      success: function (info){
        $("tbody").html(template("tmp", info));
        $("#paginator").bootstrapPaginator({
          bootstrapMajorVersion: 3,
          currentPage: page,

          //type属性：
          // 如果是首页---> first
          // 上一页-->prev
          // 下一页-->next
          // 尾页-->last
          // 具体的页码-->page
          totalPages: Math.ceil(info.total / pageSize),
          itemTexts: function (type, page, ) {
            switch (type) {
              case "first":
                return "首页";
              case "prev":
                return "上一页";
              case "next":
                return "下一页";
              case "last":
                return "尾页";
              //如果是page，说明就是数字，只需要返回对应的数字即可
              default:
                return page;
            }
          },
      
          useBootstrapTooltip: true,
          onPageClicked: function (a, b, c, p) {
           page = p;
            render();
          }

        });
        
      }

    })
  }
render()


    // 給按钮添加点击事件
    $('.btn_add').on('click',function(){
      //显示模态框 
      $('#add_modal').modal('show')

      $.ajax({
        type:"get",
        url:'/category/querySecondCategoryPaging',
        data:{
          page:1,
          pageSize:100
        },
        success:function(info){
          console.log(info);
          // 渲染页面
          $('.dropdown-menu').html(template('tmp1' ,info))


        }
      })
    })

    // 给li注册点击事件 ,因为li是动态生成的 要注册事件委托 
    $('.dropdown-menu').on('click','li' ,function(){

      $('.dropdown-text').html($(this).text())
      $('[name=brandId]').val($(this).data('id'))
        //给隐暗藏的input修改验证成功
        $("form").data('bootstrapValidator').updateStatus('brandId', 'VALID')
    })

    //商品图片上传功能
    $('#file').fileupload({

      done:function(e,data){
        if(imgs.length >= 3){
          return false
        }
        //把图片显示到页面中 
        $('<img src="'+data.result.picAddr+'" width="100" height="100" alt="">').appendTo('.img-box')
        // 把结果储存起来  添加的时候需要使用 
        imgs.push(data.result)

        // 手动验证 如果数组的长度如果是3 手动让校验成功即可 

        if(imgs.length===3){
        $("form").data('bootstrapValidator').updateStatus('picStatus', 'VALID')
        }else{
        $("form").data('bootstrapValidator').updateStatus('picStatus', 'INVALID')
        }
      }

    })

        // 表单校对
    $('form').bootstrapValidator({

      //把隐藏的input也要校对 
      excluded: [],
      feedbackIcons: {
        //校验成功的图标
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        brandId: {
          validators:{
            notEmpty:{
              message:"请选择二级分类"
            }
          }
        },
        proName: {
          validators:{
            notEmpty:{
              message:"请输入商品的名称"
            }
          }
        },
        proDesc:{
          validators:{
            notEmpty:{
              message:"请输入商品的描述"
            }
          }
        },
        num:{
          validators:{
            notEmpty:{
              message:"请输入商品的库存"
            } ,
            regexp: {
              //不能是0开头，必须是数字
              regexp:/^[1-9]\d*$/,
              message:"请输入合法的库存"
            }
          }
        },
        size:{
          validators:{
            notEmpty:{
              message:"请输入商品的尺码"
            },
            regexp: {
              //不能是0开头，必须是数字
              regexp:/^\d{2}-\d{2}$/,
              message:"请输入合法的尺码,'例如(32-46)"
            }
          }
        },
        oldPrice:{
          validators:{
            notEmpty:{
              message:"请输入原价"
            }
          }
        },
        price:{
          validators:{
            notEmpty:{
              message:"请输入价格"
            }
          }
        },
        picStatus:{
          validators:{
            notEmpty:{
              message:"请上传3张图片"
            }
          }
        }



      }






    })


    // 注册表单验证成功事件
    $('form').on('success.form.bv',function(e){

      // 阻止浏览器默认行为 

      e.preventDefault()

      //先拼好数据 
      var param = $('form').serialize()
      //在拼上6个数据 
      param+='&picName1'+imgs[0].picName+ '&picAddrl'+imgs[0].picAddr 
      param+='&picName2'+imgs[1].picName+ '&picAddr2'+imgs[1].picAddr 
      param+='&picName3'+imgs[2].picName+ '&picAddr3'+imgs[2].picAddr 

      //发送ajax请求 
      $.ajax({
        type:'post',
        url: '/product/addProduct',
        data:param,
        success:function(info){
          $('#add_modal').modal('hide')
          // 重新渲染
          page =1 
          render()
          //重置样式 
          $('form')
          .data('bootstrapValidator')
          .resetForm(true)

          // 手动清除样式
          $('.dropdown-text').html('请选择二级分类')
          $('.img-box img').remove()
          imgs=[]
        }
      })

    })
})